<template>
	<view class="content">
		<view style="display: flex;flex-direction: column;" v-for="(item,index) in list" :key="index">
			<view style="display: flex;flex-direction: row;padding: 10rpx;border-bottom: 2rpx solid  #C8C7CC;align-items: center;" @tap="click(index)">
				<text class="uni_text" style="width: 100%;">{{item}}</text>
				<view>></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["text", "image", "swiper", "moveable", "button", "touch", "animation"]
			}
		},
		methods: {
			click(index){
				var url = '/pages/main/text';
				if (index == 1) {
					url = '/pages/main/image';
				} else if (index == 2) {
					url = '/pages/main/swiper';
				} else if (index == 3) {
					url = '/pages/main/moveable';
				} else if (index == 4) {
					url = '/pages/main/button';
				}else if (index == 5) {
					url = '/pages/main/touch';
				}else if (index == 6) {
					url = '/pages/main/animation';
				} else {
					url = '/pages/main/text';
				}
				uni.navigateTo({
					url: url,
					animationType:'slide-in-top',
					animationDuration:300
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.uni_text {
		color: #333333;
		font-size: 28rpx;
	}
</style>
